﻿<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:IntegrationExample"
    xmlns:data="using:IntegrationExample.Data"
    xmlns:common="using:IntegrationExample.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    x:Name="PageRoot"
    x:Class="IntegrationExample.ContactDetailPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Mode=Self}}"
    mc:Ignorable="d">

    <Page.BottomAppBar>
        <CommandBar>
            <CommandBar.SecondaryCommands>
                <AppBarButton x:Name="SetAccountPicButton" Icon="Contact" Label="Set Account Pic" Click="HandleSetAccountPicClick"/>
            </CommandBar.SecondaryCommands>
            <AppBarButton Icon="Clock" Label="Set Appointment" Click="HandleMakeAppointmentClick" />
            <AppBarButton Icon="CalendarWeek" Label="Show Week" Click="HandleShowWeekClick" />
            <AppBarButton Icon="Add" Label="Add File" Click="HandleAddFileClick" />
        </CommandBar>
    </Page.BottomAppBar>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<Grid.ChildrenTransitions>
			<TransitionCollection>
				<EntranceThemeTransition/>
			</TransitionCollection>
		</Grid.ChildrenTransitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="140"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>

		<!-- Horizontal scrolling grid -->
		<Grid Grid.Row="1" Margin="120,0,0,50">
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="380"/>
				<ColumnDefinition Width="*"/>
			</Grid.ColumnDefinitions>

			<StackPanel Width="380" Margin="0,4,14,0" Grid.Column="0" DataContext="{Binding Contact}">
				<TextBlock Text="{Binding Converter={StaticResource ContactEmailSelectionValueConverter}}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
				<TextBlock Text="{Binding Converter={StaticResource ContactPhoneSelectionValueConverter}}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
				<!--<TextBlock Text="{Binding Id}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>-->
				<Image Source="{Binding Thumbnail, Converter={StaticResource ThumbnailValueConverter}}" Height="300" Margin="0" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Tapped="HandleContactImageTapped">
					<Interactivity:Interaction.Behaviors>
						<local:PointerDownUpBehavior/>
					</Interactivity:Interaction.Behaviors>
				</Image>
                <TextBlock Text="Click the image to display a contact card." Style="{StaticResource BodyTextBlockStyle}" FontStyle="Italic" HorizontalAlignment="Center"/>
			</StackPanel>

			<GridView x:Name="ItemGridView"
				Grid.Column="1"
				ItemsSource="{Binding Files}"
				SelectionMode="Single"
				IsSwipeEnabled="false"
				SelectionChanged="HandleSelectedItemChanged">
				<!--ItemClick="ItemView_ItemClick">-->
				<GridView.ItemTemplate>
					<DataTemplate>
						<Grid Height="110" Width="480" Margin="10">
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="Auto"/>
								<ColumnDefinition Width="*"/>
							</Grid.ColumnDefinitions>
							<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
								<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
							</Border>
							<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
								<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
								<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
								<TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60"/>
							</StackPanel>
						</Grid>
					</DataTemplate>
				</GridView.ItemTemplate>
				<GridView.ItemContainerStyle>
					<Style TargetType="FrameworkElement">
						<Setter Property="Margin" Value="52,0,0,2"/>
					</Style>
				</GridView.ItemContainerStyle>
			</GridView>
		</Grid>

		<!-- Back button and page title -->
		<Grid Grid.Row="0">
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="120"/>
				<ColumnDefinition Width="*"/>
			</Grid.ColumnDefinitions>
			<Button x:Name="BackButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=PageRoot}"
				Style="{StaticResource NavigationBackButtonNormalStyle}"
				VerticalAlignment="Top"
				AutomationProperties.Name="Back"
				AutomationProperties.AutomationId="BackButton"
				AutomationProperties.ItemType="Navigation Button"/>
			<TextBlock x:Name="PageTitle" Text="{Binding Contact.DisplayName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
				IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
		</Grid>
	</Grid>
</Page>
